<template>
  <div class="all flex-c">
    <div class="cy" :id="cyId" ref="cyId" v-show="cyFlag" @click="clickAction" @contextmenu.prevent="cyContextmenu"></div>
    <div class="noDataBox" v-show="noDataFlag">
      <svg t="1628476225642" class="noDataIcon" viewBox="0 0 1280 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="38223" width="100" height="100">
        <path d="" fill="#999999" p-id="38224"></path>
      </svg>
      <div>没有数据</div>
    </div>
    <div v-if="Nodes && Nodes.length > 0">
      <div @contextmenu.prevent="nodeContextmenu(item,$event)" @click.prevent="nodeClick(item)" @mouseover.prevent="nodeHover(item)" @mouseout.prevent="nodeMοuseοver(item)" class="NodeDataDiv" :id="'NodeDataDiv' + item.data.id" v-for="item in Nodes" :key="'NodeDataDiv' + item.data.id" data-title="节点元素" :style="{
          top: item.y1 + 'px',
          left: item.x1 + 'px',
          width: item.w + 'px'
        }">
        <div :class="{
            NodeStartAndFinsh:
              item.data.id == 'finish' || item.data.id == 'start',
            NodeDataDivTop: item.data.id != 'finish' && item.data.id != 'start'
          }" :id="'NodeDataDivTop' + item.data.id" data-title="节点名称" @contextmenu.prevent="">
          {{ item.data.name }}
          <img :src="'@/assets/png/'+item.stepTypeInfo.png+'.svg'" alt="" v-show="true" class="nodeStatusImg">
        </div>
        <div @contextmenu.prevent="" v-show="item.data.id != 'finish' && item.data.id != 'start'" class="NodeDataDivDown" :id="'NodeDataDivDown' + item.data.id" data-title="节点步骤类型">
          {{ item.data.stepTypeName }}
        </div>
      </div>

    </div>
  </div>
</template>

<script>
var cy = {};
// module.exports =
export default {
  name: "cytoscapeNodes",
  data: function () {
    return {
      noDataFlag: false,
      cyId: "cyId",
      cy: {},
      stepTypeObj: {},
      cyFlag: false,
      // Nodes: [],//节点容器
      // Edges: [],//节点关系
    };
  },
  props: ["Id", "Nodes", "Edges", "stepTypeList", "stepTypeClass"],
  // 监听属性 类似于data概念
  // 监控data中的数据变化
  watch: {
    Id: function (val) {
      let me = this;
      val ? (me.cyId = val) : "";
    },
    Nodes: function (val) {
      let me = this;
      setTimeout(() => {
        if (val && val.length > 0) {
          me.noDataFlag = false;
          me.init();
        } else {
          me.noDataFlag = true;
          me.cy.destroy ? me.cy.destroy() : "";
          me.init();
        }
      }, 50);
    },
    stepTypeList: function (val) {
      let me = this;
      console.log("%o stepTypeList", val);
      setTimeout(() => {
        me.stepTypeListInit();
      }, 250);
    },
    stepTypeClass: function (val) {
      let me = this;
      me.stepTypeClassMap = me.stepTypeClass;
    },
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let me = this;

    window.setNoDataClass ? setNoDataClass() : "";
    setTimeout(() => {
      if (!me.Nodes || me.Nodes.length == 0) {
        me.noDataFlag = true;
      }
      me.init();
    }, 5);
  },
  // 方法集合
  methods: {
    init() {
      let me = this;
      me.Id ? (me.cyId = me.Id) : (me.cyId = "cyId");
      me.cytoscapeInit();
    },

    cytoscapeInit() {
      //绘制节点初始化
      let me = this;
      me.cyFlag = false;

      if (me.Nodes && me.Nodes.length > 0 && cytoscapeStyle) {
        cytoscapeStyle[0].style.shape = "rectangle";
        // cytoscapeStyle[0].style.shape="bottom-round-rectangle"
        cytoscapeStyle[0].style["color"] = "rgba(0,0,0,0.5)";
        // cytoscapeStyle[0].style["background-color"] = "#9DBBFA";
        cytoscapeStyle[0].style["background-color"] = "#F4F4F4";
        cytoscapeStyle[0].style["border-color"] = "#9DBBFA";
        cytoscapeStyle[0].style["border-width"] = "0";
        cytoscapeStyle[0].style["border-opacity "] = "0";

        cytoscapeStyle[2].style["line-color"] = "#9DBBFA";
        cytoscapeStyle[2].style["target-arrow-color"] = "#9DBBFA";
        cy = cytoscape({
          ...cytoscapeBaseInfo,
          container: me.$refs.cyId,
          // document.getElementById(""+me.cyId),
          layout: cytoscapeLayouts,
          style: cytoscapeStyle,
          elements: {
            //节点数据
            nodes: me.Nodes,
            //连线数据
            edges: me.Edges,
          },
        });

        setTimeout(() => {
          me.cytoscapeInitEnd();
          me.createDAGDivInit();
        }, 88);
      }
    },
    cytoscapeInitEnd() {
      console.log("cytoscapeInitEnd---图像绘制完成");

      let me = this;
      window.IPLAT ? IPLAT.progress($("#maxDAGByWindow"), false) : "";
    },
    /**
     * 初始化标签效果
     */
    createDAGDivInit() {
      let me = this;
      me.cyFlag = true;
      me.Nodes.map((item) => {
        let id = item.data.id;
        let Node = cy.$("#" + id);
        let { x1, y1, x2, y2, w, h } = Node[0]._private.bbCache;
        item.x1 = x1;
        item.y1 = y1;
        item.x2 = x2;
        item.y2 = y2;
        item.w = w;
        item.h = h;
      });
      setTimeout(() => {
        me.stepTypeListInit();
      }, 250);
    },
    /**
     * stepTypeListInit  设置节点步骤类型
     */
    stepTypeListInit() {
      let me = this;
      if (me.stepTypeList && me.stepTypeList.length > 0) {
        me.Nodes.map((item) => {
          let id = item.data.id;
          let name = item.data.name;

          if (!me.isNodeStart(id)) {
            me.stepTypeList.map((it) => {
              if (it.stepName == name) {
                if (me.stepTypeClass) {
                  let value = me.stepTypeClass.get(it.stepType - 0);
                  value
                    ? (item.data.stepTypeName = value)
                    : (item.data.stepTypeName = it.stepType);
                }
              }
            });
          }
        });
      }
    },
    isNodeStart(id) {
      if (id == "start" || id == "finish") {
        return true;
      } else {
        return false;
      }
    },
    /**
     * nodeHover  节点移入
     */
    nodeHover(item) {
      let me = this;
      let id = item.data.id;
      me.$emit("nodehover", item);
    },
    /**
     * nodeHover  节点移出
     */
    nodeMοuseοver(item) {
      let me = this;
      let id = item.data.id;
      this.$emit("nodehoverendfn", item);
    },
    /**
     * nodeContextmenu 节点右键
     */
    nodeContextmenu(item, event) {
      this.$emit("nodecontextmenu", item, event);
      return false;
    },
    /**
     *节点点击事件
     **/
    nodeClick(item) {
      this.$emit("nodeclick", item);
    },
    /**
     *clickAction  节点界面点击事件
     **/
    clickAction() {
      this.$emit("clickaction");
    },
    /**
     * cyContextmenu 节点界面右键事件
     **/
    cyContextmenu() {
      this.$emit("cycontextmenu");
    },
    /**
     * hideNodeInfo  隐藏节点信息
     */
    hideNodeInfo() {
      console.log("hideNodeInfo");
    },
    stepTypeClassFn(str) {
      return str;
    },
    getStepType(value) {
      let me = this;

      if (me.stepTypeClass) {
        value = me.stepTypeClass[value];
      }
      return value;
    },
  },
};
</script>

<style scoped>
.all {
  position: relative;
  background: #f4f4f4;
  width: 100%;
  height: 100%;
}
.NodeDataDiv {
  z-index: 4;
  position: absolute;
  min-width: 80px;
  text-align: center;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.8);
  background: #fff;
  max-width: 140px;
  overflow: hidden; /*超出部分隐藏*/
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap; /*规定段落中的文本不进行换行 */
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently*/
}
.NodeStartAndFinsh {
  max-width: 140px;
  padding: 0 10px;
  height: 40px;
  line-height: 40px;
  background: #9dbbfa;
  overflow: hidden; /*超出部分隐藏*/
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap; /*规定段落中的文本不进行换行 */
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently*/
  pointer-events: none;
}
.NodeDataDivTop {
  position: relative;
  max-width: 140px;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
  background: #9dbbfa;
  overflow: hidden; /*超出部分隐藏*/
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap; /*规定段落中的文本不进行换行 */
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently*/
  pointer-events: none;
}
.NodeDataDivDown {
  max-width: 140px;
  height: 30px;
  line-height: 30px;
  width: 100%;
}
.noDataBox {
  position: absolute;
  top: 50%;
  display: block;
}
.flex-c {
  display: flex;
  justify-content: center;
  align-items: center;
}
.cy {
  width: 100%;
  height: 100%;
}
.nodeStatusImg {
  position: absolute;
  top: -6px;
  right: -6px;
}
</style>
